<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/home/index/index' }"
          >首页</el-breadcrumb-item
        >
        <el-breadcrumb-item :to="{ path: '/statistics' }"
          >数据统计</el-breadcrumb-item
        >
        <el-breadcrumb-item
          ><a href="/statistics/detalistatistics"
            >统计详情</a
          ></el-breadcrumb-item
        >
      </el-breadcrumb>
    </div>
    <div class="crumbs">
      <div><strong>XXX试卷</strong></div>
      <div class="boxtest">
        <span style="font-size: 20px; font-weight: 900"
          >通过率：<el-tag>80%</el-tag></span
        >
      </div>
      <div class="boxtest">
        <span style="font-size: 20px; font-weight: 900"
          >使用率：<el-tag>56%</el-tag></span
        >
      </div>
      <div class="boxtest">
        <span style="font-size: 20px; font-weight: 900"
          >最高平均分：<el-tag>89.12%</el-tag></span
        >
      </div>
      <div class="boxtest">
        <span style="font-size: 20px; font-weight: 900"
          >累计好评：<el-tag>2430次</el-tag></span
        >
      </div>
    </div>
    <div class="crumbs">
      <div style="padding: 10px">
        <strong>试卷试题</strong>
      </div>
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="Qname" label="试题名" width="180" />
        <el-table-column type="expand">
          <template #default="props">
            <el-table :data="props.row.chliren">
              <el-table-column label="选项" prop="option" />
              <el-table-column label="答案">
                <template #default="scope">
                  <el-tag
                    :type="scope.row.IsRigh == 0 ? 'danger' : 'primary'"
                    disable-transitions
                  >
                    {{ scope.row.IsRigh == 0 ? "错误" : "正确" }}
                  </el-tag>
                </template>
              </el-table-column>
            </el-table>
          </template>
        </el-table-column>
        <el-table-column prop="Qreply" label="答对率">
          <template #default="scope">
            <el-tag>{{ scope.row.Qreply }}%</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="Qanswer" label="错误率">
          <template #default="scope">
            <el-tag>{{ scope.row.Qanswer }}%</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="QisUse" label="使用次数">
          <template #default="scope">
            <el-tag>{{ scope.row.QisUse }}次</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="Qlv" label="试题难度">
          <template #default="scope">
            <el-tag>{{ scope.row.Qlv }}级</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="Qcollect" label="收藏率">
          <template #default="scope">
            <el-tag>{{ scope.row.Qcollect }}%</el-tag>
          </template>
        </el-table-column>
      </el-table>
      <div style="padding: 20px">
        <el-pagination background layout="prev, pager, next" :total="1000" />
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs } from "vue";
import { StatisticDetali } from "@/utils/Exam/statistics/statisticdetali";

export default defineComponent({
  setup() {
    const data = reactive<StatisticDetali>({
      tableData: [
        {
          Qname: "XXXX问题",
          Qreply: 50,
          Qanswer: 50,
          QisUse: 423,
          Qlv: 5,
          Qcollect: 35,
          chliren: [
            {
              option: "XXdsadsadawdawsd",
              IsRigh: 0,
            },
            {
              option: "XXdsadsadawdawsd",
              IsRigh: 1,
            },
            {
              option: "XXdsadsadawdawsd",
              IsRigh: 0,
            },
            {
              option: "XXdsadsadawdawsd",
              IsRigh: 0,
            },
          ],
        },
        {
          Qname: "XXXX问题",
          Qreply: 50,
          Qanswer: 50,
          QisUse: 423,
          Qlv: 5,
          Qcollect: 35,
        },
        {
          Qname: "XXXX问题",
          Qreply: 50,
          Qanswer: 50,
          QisUse: 423,
          Qlv: 5,
          Qcollect: 35,
        },
        {
          Qname: "XXXX问题",
          Qreply: 50,
          Qanswer: 50,
          QisUse: 423,
          Qlv: 5,
          Qcollect: 35,
        },
      ],
    });
    const methods = {};
    return {
      ...toRefs(data),
      ...methods,
    };
  },
});
</script>
<style scoped>
.crumbs {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  padding: 20px;
  margin: 15px;
  background-color: white;
  width: 94%;
}
.boxtest {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  padding: 20px;
  margin: 15px;
  background-color: white;
  width: 20%;
  display: inline-block;
}
</style>
